×
Borders In HTML CSS And JavaScript 100+

WcCoder

Borders In HTML CSS And JavaScript

Here many types of borders are created in HTML CSS JavaScript.

You can use all these borders anywhere.

All the borders available on this page are auto fit borders. All these borders adjust according to your device.

The width of all the borders present on this page is 80%, if you want you can increase or decrease its width, and the width is auto.

You can make some changes in these borders, Ex:-- Height, Width, Background, Color, Position, Paragraph.

The border-style property specifies the type of border that will be displayed. Valid options for the the border-style are none, dotted, dashed, solid, double, groove, ridge, inset, outset, and inherit. Most of the styles alter the border appearance, but none and inherit are special. Setting the border-style to none disables borders, and inherit uses the border-style inherited from a less-specific selector.

The border-width property specifies how wide the border around a box should be. Borders are usually specified in pixels, but any CSS unit of measurement can be used. To create a 1-pixel, dashed border around all the anchors On a page, you use the following CSS:
a { border-width: 1px; border-style: solid;}

You can also use them to give a better look to text and paragraphs in your website.

WcCoder.com also runs new border projects built from HTML CSS JavaScript.

Input Output
HTML & CSS 59
               <table border="0" style="overflow: hidden;position: relative;height: auto;width: 90%;padding: 0px;margin: auto;top: 10px;box-shadow: 0px 0px 6px 2px rgba(18, 0, 44, 1.0);">
                  <tr>
                        <td style="position: relative">
                        <div style="border: 0px orangered double;padding: 65px;text-align: justify;">
                              
                           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                           tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                           quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                           consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                                                        
                           <div style="position: absolute;height: 80%;width: 80%;border: 0px black solid;top: 0;left: 0;overflow: hidden;">
                              <div style="height: 33px;width: 100%;border-top: 4px black solid;border-left: 4px black solid;margin-left: 47px;">
                                 <div style="height: 22px;width: 95%;border-top: 4px black solid;border-left: 4px black solid;margin: 7px;">         
                                 </div>
                              </div>
                              <div style="position: absolute;height: 29px;width: 29px;border: 4px black solid;top: 0;">
                              </div>
                              <div style="position: absolute;height: 14px;width: 14px;border-top: 4px black solid;border-left: 4px black solid;top: 33px;left: 33px;">
                              </div>
                              <div style="position: absolute;height: 10px;width: 10px;border: 4px black solid;top: 44px;left: 44px;">
                              </div>
                              <div style="height: 100%;width: 33px;border-top: 4px black solid;border-left: 4px black solid;margin-top: 10px;">
                                 <div style="height: 95%;width: 22px;border-top: 4px black solid;border-left: 4px black solid;margin: 7px;">
                                 </div>
                              </div>
                           </div>
                           <div style="position: absolute;height: 80%;width: 80%;border: 0px black solid;bottom: 0;right: 0;overflow: hidden;transform: rotate(180deg);">

                              <div style="height: 33px;width: 100%;border-top: 4px black solid;border-left: 4px black solid;margin-left: 47px;">
                                 <div style="height: 22px;width: 95%;border-top: 4px black solid;border-left: 4px black solid;margin: 7px;">
                                 </div>
                              </div>
                              <div style="position: absolute;height: 29px;width: 29px;border: 4px black solid;top: 0;">
                              </div>
                              <div style="position: absolute;height: 14px;width: 14px;border-top: 4px black solid;border-left: 4px black solid;top: 33px;left: 33px;">
                              </div>
                              <div style="position: absolute;height: 10px;width: 10px;border: 4px black solid;top: 44px;left: 44px;">
                              </div>
                              <div style="height: 100%;width: 33px;border-top: 4px black solid;border-left: 4px black solid;margin-top: 10px;">
                                 <div style="height: 95%;width: 22px;border-top: 4px black solid;border-left: 4px black solid;margin: 7px;">
                                 </div>
                              </div>
                           </div>
                        </div>
                        </td>
                  </tr>
               </table>               
            
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
HTML & CSS 72
        
               <table border="0" style="overflow: hidden;position: relative;height: auto;width: 90%;padding: 0px;margin: auto;top: 10px;box-shadow: 0px 0px 6px 2px rgba(18, 0, 44, 1.0);">
                  <tr>
                        <td style="position: relative">
                        <div style="border: 0px orangered double;padding: 60px 60px;text-align: justify;">                            
                           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                           tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                           quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                           consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                           cillum dolore eu fugiat nulla pariatur.

                              <div style="position: absolute;height: 30px;width: 30px;border: 4px blue solid;top: 0;left: 0;">
                              </div>
                              <div style="position: absolute;height: 30px;width: 30px;border-top: 4px blue solid;border-left: 4px blue solid;top: 34px;left: 34px;">
                              </div>
                              <div style="position: absolute;height: 30px;width: 60%;border-top: 4px blue solid;border-left: 4px blue solid;top: 0px;left: 64px;">
                              </div>
                              <div style="position: absolute;height: 70%;width: 30px;border-top: 4px blue solid;border-left: 4px blue solid;top: 64px;left: 0px;">
                              </div>
                              <div style="position: absolute;height: 30px;width: 30px;border: 4px blue solid;top: 15px;left: 15px;">
                              </div>
                              <div style="position: absolute;height: 30px;width: 30px;border-top: 4px blue solid;border-left: 4px blue solid;top: 49px;left: 49px;">
                              </div>
                              <div style="position: absolute;height: 30px;width: 50%;border-top: 4px blue solid;border-left: 4px blue solid;top: 15px;left: 79px;">
                              </div>
                              <div style="position: absolute;height: 60%;width: 30px;border-top: 4px blue solid;border-left: 4px blue solid;top: 79px;left: 15px;">
                              </div>

                              <div style="position: absolute;height: 30px;width: 30px;border: 4px blue solid;bottom: 0;right: 0;">
                              </div>
                              <div style="position: absolute;height: 30px;width: 30px;border-bottom: 4px blue solid;border-right: 4px blue solid;bottom: 34px;right: 34px;">
                              </div>
                              <div style="position: absolute;height: 30px;width: 60%;border-bottom: 4px blue solid;border-right: 4px blue solid;bottom: 0px;right: 64px;">
                              </div>
                              <div style="position: absolute;height: 70%;width: 30px;border-bottom: 4px blue solid;border-right: 4px blue solid;bottom: 64px;right: 0px;">
                              </div>
                              <div style="position: absolute;height: 30px;width: 30px;border: 4px blue solid;bottom: 15px;right: 15px;">
                              </div>
                              <div style="position: absolute;height: 30px;width: 30px;border-bottom: 4px blue solid;border-right: 4px blue solid;bottom: 49px;right: 49px;">
                              </div>
                              <div style="position: absolute;height: 30px;width: 50%;border-bottom: 4px blue solid;border-right: 4px blue solid;bottom: 15px;right: 79px;">
                              </div>
                              <div style="position: absolute;height: 60%;width: 30px;border-bottom: 4px blue solid;border-right: 4px blue solid;bottom: 79px;right: 15px;">
                              </div>                                                  

                        </div>
                        </td>
                  </tr>
               </table>         
            
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
HTML & CSS 73
               <table border="0" style="overflow: hidden;position: relative;height: auto;width: 80%;padding: 0px;margin: auto;top: 10px;box-shadow: 0px 0px 6px 2px rgba(18, 0, 44, 1.0);">
                  <tr>
                        <td style="position: relative">
                        <div style="border: 0px orangered double;margin: 50px;text-align: justify;">
                                           
                           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                           tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                           quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                           consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                           
                           <div style="position: absolute;height: 25px;width: 25px;border: 4px blue double;top: 0;left: 0;">
                           </div>
                              <div style="position: absolute;height: 25px;width: 25px;border-top: 4px blue double;border-left: 4px blue double;top: 29px;left: 29px;">
                              </div>
                              <div style="position: absolute;height: 25px;width: 60%;border-top: 4px blue double;border-left: 4px blue double;top: 0px;left: 54px;">
                              </div>
                              <div style="position: absolute;height: 70%;width: 25px;border-top: 4px blue double;border-left: 4px blue double;top: 54px;left: 0px;">
                              </div>
                              <div style="position: absolute;height: 25px;width: 25px;border: 4px blue double;top: 10px;left: 10px;">
                              </div>
                              <div style="position: absolute;height: 25px;width: 25px;border-top: 4px blue double;border-left: 4px blue double;top: 39px;left: 39px;">
                              </div>
                              <div style="position: absolute;height: 25px;width: 50%;border-top: 4px blue double;border-left: 4px blue double;top: 10px;left: 64px;">
                              </div>
                              <div style="position: absolute;height: 60%;width: 25px;border-top: 4px blue double;border-left: 4px blue double;top: 64px;left: 10px;">
                              </div>

                              <div style="position: absolute;height: 25px;width: 25px;border: 4px blue double;bottom: 0;right: 0;">
                              </div>
                              <div style="position: absolute;height: 25px;width: 25px;border-bottom: 4px blue double;border-right: 4px blue double;bottom: 29px;right: 29px;">
                              </div>
                              <div style="position: absolute;height: 25px;width: 60%;border-bottom: 4px blue double;border-right: 4px blue double;bottom: 0px;right: 54px;">
                              </div>
                              <div style="position: absolute;height: 70%;width: 25px;border-bottom: 4px blue double;border-right: 4px blue double;bottom: 54px;right: 0px;">
                              </div>
                              <div style="position: absolute;height: 25px;width: 25px;border: 4px blue double;bottom: 10px;right: 10px;">
                              </div>
                              <div style="position: absolute;height: 25px;width: 25px;border-bottom: 4px blue double;border-right: 4px blue double;bottom: 39px;right: 39px;">
                              </div>
                              <div style="position: absolute;height: 25px;width: 50%;border-bottom: 4px blue double;border-right: 4px blue double;bottom: 10px;right: 64px;">
                              </div>
                              <div style="position: absolute;height: 60%;width: 25px;border-bottom: 4px blue double;border-right: 4px blue double;bottom: 64px;right: 10px;">
                              </div>
                        </div>
                        </td>
                  </tr>
               </table>                        
            
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
HTML & CSS 74
                  <table border="0" style="overflow: hidden;position: relative;height: auto;width: 90%;padding: 0px;margin: auto;top: 10px;box-shadow: 0px 0px 6px 2px rgba(18, 0, 44, 1.0);">
                        <tr>
                            <td style="position: relative">
                                <div style="border: 0px orangered double;padding: 50px;text-align: justify;">                                                  
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                    cillum dolore eu fugiat nulla pariatur. 

                                    <div style="position: absolute;height: 30px;width: 30px;border: 7px red solid;top: 0;left: 0;">
                                    </div>
                                    <div style="position: absolute;height: 20px;width: 20px;border-top: 7px red solid;border-left: 7px red solid;top: 37px;left: 37px;">
                                    </div>
                                    <div style="position: absolute;height: 35px;width: 70%;border-top: 7px red solid;border-left: 7px red solid;top: 0px;left: 57px;">
                                    </div>
                                    <div style="position: absolute;height: 70%;width: 35px;border-top: 7px red solid;border-left: 7px red solid;top: 57px;left: 0px;">
                                    </div>
                                    <div style="position: absolute;height: 50%;width: 50%;border-top: 7px red solid;border-left: 7px red solid;top: 18px;left: 18px;">
                                    </div>

                                    <div style="position: absolute;height: 30px;width: 30px;border: 7px red solid;bottom: 0;right: 0;">
                                    </div>
                                    <div style="position: absolute;height: 20px;width: 20px;border-bottom: 7px red solid;border-right: 7px red solid;bottom: 37px;right: 37px;">
                                    </div>
                                    <div style="position: absolute;height: 35px;width: 70%;border-bottom: 7px red solid;border-right: 7px red solid;bottom: 0px;right: 57px;">
                                    </div>
                                    <div style="position: absolute;height: 70%;width: 35px;border-bottom: 7px red solid;border-right: 7px red solid;bottom: 57px;right: 0px;">
                                    </div>
                                    <div style="position: absolute;height: 50%;width: 50%;border-bottom: 7px red solid;border-right: 7px red solid;bottom: 18px;right: 18px;">
                                    </div>                                                        

                                </div>
                            </td>
                        </tr>
                    </table>                    
                
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
HTML & CSS 75
                  <table border="0" style="overflow: hidden;position: relative;height: auto;width: 90%;padding: 0px;margin: auto;top: 10px;box-shadow: 0px 0px 6px 2px rgba(18, 0, 44, 1.0);">
                        <tr>
                            <td style="position: relative">
                                <div style="border: 0px orangered double;padding: 60px;text-align: justify;">
                                                 
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                    cillum dolore eu fugiat nulla pariatur. 

                                    <div style="position: absolute;height: 30px;width: 30px;border: 7px red double;top: 0;left: 0;">
                                    </div>
                                    <div style="position: absolute;height: 20px;width: 20px;border-top: 7px red double;border-left: 7px red double;top: 37px;left: 37px;">
                                    </div>
                                    <div style="position: absolute;height: 35px;width: 70%;border-top: 7px red double;border-left: 7px red double;top: 0px;left: 57px;">
                                    </div>
                                    <div style="position: absolute;height: 70%;width: 35px;border-top: 7px red double;border-left: 7px red double;top: 57px;left: 0px;">
                                    </div>
                                    <div style="position: absolute;height: 50%;width: 50%;border-top: 7px red double;border-left: 7px red double;top: 18px;left: 18px;">
                                    </div>

                                    <div style="position: absolute;height: 30px;width: 30px;border: 7px red double;bottom: 0;right: 0;">
                                    </div>
                                    <div style="position: absolute;height: 20px;width: 20px;border-bottom: 7px red double;border-right: 7px red double;bottom: 37px;right: 37px;">
                                    </div>
                                    <div style="position: absolute;height: 35px;width: 70%;border-bottom: 7px red double;border-right: 7px red double;bottom: 0px;right: 57px;">
                                    </div>
                                    <div style="position: absolute;height: 70%;width: 35px;border-bottom: 7px red double;border-right: 7px red double;bottom: 57px;right: 0px;">
                                    </div>
                                    <div style="position: absolute;height: 50%;width: 50%;border-bottom: 7px red double;border-right: 7px red double;bottom: 18px;right: 18px;">
                                    </div>                                                        

                                </div>
                            </td>
                        </tr>
                    </table>                    
                
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
HTML & CSS 76
                  <table border="0" style="overflow: hidden;position: relative;height: auto;width: 90%;padding: 0px;margin: auto;top: 10px;box-shadow: 0px 0px 6px 2px rgba(18, 0, 44, 1.0);">
                        <tr>
                            <td style="position: relative">
                                <div style="border: 0px orangered double;padding: 60px;text-align: justify;">
                                    
              
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                    cillum dolore eu fugiat nulla pariatur. 

                                    <div style="position: absolute;height: 30px;width: 30px;border: 7px red solid;top: 0;left: 0;">
                                    </div>
                                    <div style="position: absolute;height: 20px;width: 20px;border-top: 7px red solid;border-left: 7px red solid;top: 37px;left: 37px;">
                                    </div>
                                    <div style="position: absolute;height: 35px;width: 40%;border-top: 7px red solid;border-left: 7px red solid;top: 0px;left: 57px;">
                                    </div>
                                    <div style="position: absolute;height: 40%;width: 35px;border-top: 7px red solid;border-left: 7px red solid;top: 57px;left: 0px;">
                                    </div>
                                    <div style="position: absolute;height: 75%;width: 75%;border-top: 7px red solid;border-left: 7px red solid;top: 18px;left: 18px;">
                                    </div>

                                    <div style="position: absolute;height: 30px;width: 30px;border: 7px red solid;bottom: 0;right: 0;">
                                    </div>
                                    <div style="position: absolute;height: 20px;width: 20px;border-bottom: 7px red solid;border-right: 7px red solid;bottom: 37px;right: 36.5px;">
                                    </div>
                                    <div style="position: absolute;height: 37px;width: 40%;border-bottom: 7px red solid;border-right: 7px red solid;bottom: 0px;right: 57px;">
                                    </div>
                                    <div style="position: absolute;height: 40%;width: 35px;border-bottom: 7px red solid;border-right: 7px red solid;bottom: 57px;right: 0px;">
                                    </div>
                                    <div style="position: absolute;height: 75%;width: 75%;border-bottom: 7px red solid;border-right: 7px red solid;bottom: 18px;right: 18px;">
                                    </div>                                                        

                                </div>
                            </td>
                        </tr>
                    </table>                    
                
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
HTML & CSS 77
           
                  <table border="0" style="overflow: hidden;position: relative;height: auto;width: 90%;padding: 0px;margin: auto;top: 10px;box-shadow: 0px 0px 6px 2px rgba(18, 0, 44, 1.0);">
                        <tr>
                            <td style="position: relative">
                                <div style="border: 0px orangered double;padding: 60px;text-align: justify;">                                                 
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                    quis nostrud exercitation ullamco laboris nisi ut 
                                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                    cillum dolore eu fugiat nulla pariatur. 
                                    <div style="position: absolute;height: 30px;width: 30px;border: 7px red double;top: 0;left: 0;">
                                    </div>
                                    <div style="position: absolute;height: 20px;width: 20px;border-top: 7px red double;border-left: 7px red double;top: 37px;left: 37px;">
                                    </div>
                                    <div style="position: absolute;height: 35px;width: 30%;border-top: 7px red double;border-left: 7px red double;top: 0px;left: 57px;">
                                    </div>
                                    <div style="position: absolute;height: 30%;width: 35px;border-top: 7px red double;border-left: 7px red double;top: 57px;left: 0px;">
                                    </div>
                                    <div style="position: absolute;height: 70%;width: 70%;border-top: 7px red double;border-left: 7px red double;top: 18px;left: 18px;">
                                    </div>

                                    <div style="position: absolute;height: 30px;width: 30px;border: 7px red double;bottom: 0;right: 0;">
                                    </div>
                                    <div style="position: absolute;height: 20px;width: 20px;border-bottom: 7px red double;border-right: 7px red double;bottom: 37px;right: 37.5px;">
                                    </div>
                                    <div style="position: absolute;height: 35px;width: 30%;border-bottom: 7px red double;border-right: 7px red double;bottom: 0px;right: 57px;">
                                    </div>
                                    <div style="position: absolute;height: 30%;width: 35px;border-bottom: 7px red double;border-right: 7px red double;bottom: 57px;right: 0px;">
                                    </div>
                                    <div style="position: absolute;height: 70%;width: 70%;border-bottom: 7px red double;border-right: 7px red double;bottom: 18px;right: 18px;">
                                    </div>                                                        

                                </div>
                            </td>
                        </tr>
                    </table>                    
                
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
HTML & CSS 84
           
                  <table border="0" style="overflow: hidden;position: relative;height: auto;width: 90%;padding: 0px;margin: auto;top: 10px;box-shadow: 0px 0px 6px 2px rgba(18, 0, 44, 1.0);">
                        <tr>
                            <td style="position: relative">
                                <div style="border: 0px orangered double;padding: 80px 45px;text-align: justify;">
                                    
                              <h1 style="text-align: center;">Heding</h1>
                              <br/>

                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                    
                                    <div style="position: absolute;height: 30px;width: 30px;border: 7px red solid;top: 0;left: 0;">
                                    </div>
                                    <div style="position: absolute;height: 30px;width: 30px;border: 7px red solid;top: 37px;left: 37px;">
                                    </div>
                                    <div style="position: absolute;height: 57px;width: 50%;border-top: 7px red solid;border-left: 7px red solid;top: 0px;left: 57px;">
                                    </div>
                                    <div style="position: absolute;height: 50%;width: 57px;border-top: 7px red solid;border-left: 7px red solid;top: 57px;left: 0px;">
                                    </div>
                                    <div style="position: absolute;height: 85%;width: 85%;border-top: 7px red solid;border-left: 7px red solid;top: 18px;left: 18px;">
                                    </div>

                                    <div style="position: absolute;height: 30px;width: 30px;border: 7px red solid;bottom: 0;right: 0;">
                                    </div>
                                    <div style="position: absolute;height: 30px;width: 30px;border: 7px red solid;bottom: 37px;right: 37px;">
                                    </div>
                                    <div style="position: absolute;height: 57px;width: 50%;border-bottom: 7px red solid;border-right: 7px red solid;bottom: 0px;right: 57px;">
                                    </div>
                                    <div style="position: absolute;height: 50%;width: 57px;border-bottom: 7px red solid;border-right: 7px red solid;bottom: 57px;right: 0px;">
                                    </div>
                                    <div style="position: absolute;height: 85%;width: 85%;border-bottom: 7px red solid;border-right: 7px red solid;bottom: 18px;right: 18px;">
                                    </div>                                                        

                                </div>
                            </td>
                        </tr>
                    </table>                   
                

Heding


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
HTML & CSS 85
                  <table border="0" style="overflow: hidden;position: relative;height: auto;width: 90%;padding: 0px;margin: auto;top: 10px;box-shadow: 0px 0px 6px 2px rgba(18, 0, 44, 1.0);">
                        <tr>
                            <td style="position: relative">
                                <div style="border: 0px orangered double;padding: 50px 50px 90px 50px;text-align: justify;">
                                    
                              <h1 style="text-align: center;">Heding</h1>
                              <br/>

                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                     
                                    <div style="position: absolute;height: 30px;width: 30px;border: 7px red double;top: 0;right: 0;">
                                    </div>
                                    <div style="position: absolute;height: 30px;width: 30px;border: 7px red double;top: 36.5px;right: 36.5px;">
                                    </div>
                                    <div style="position: absolute;height: 57px;width: 50%;border-top: 7px red double;border-right: 7px red double;top: 0px;right: 57px;">
                                    </div>
                                    <div style="position: absolute;height: 50%;width: 57px;border-top: 7px red double;border-right: 7px red double;top: 57px;right: 0px;">
                                    </div>
                                    <div style="position: absolute;height: 82%;width: 82%;border-top: 7px red double;border-right: 7px red double;top: 18px;right: 18px;">
                                    </div>

                                    <div style="position: absolute;height: 30px;width: 30px;border: 7px red double;bottom: 0;left: 0;">
                                    </div>
                                    <div style="position: absolute;height: 30px;width: 30px;border: 7px red double;bottom: 36.5px;left: 36.5px;">
                                    </div>
                                    <div style="position: absolute;height: 57px;width: 50%;border-bottom: 7px red double;border-left: 7px red double;bottom: 0px;left: 57px;">
                                    </div>
                                    <div style="position: absolute;height: 50%;width: 57px;border-bottom: 7px red double;border-left: 7px red double;bottom: 57px;left: 0px;">
                                    </div>
                                    <div style="position: absolute;height: 82%;width: 82%;border-bottom: 7px red double;border-left: 7px red double;bottom: 18px;left: 18px;">
                                    </div>                                                        

                                </div>
                            </td>
                        </tr>
                    </table> 
                

Heding


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse